<template>
  <el-card class="box-card mt-4">
    <template #header>
      <div style="border-bottom: 1px">
        {{ props.title }}
        <el-button style="padding-left: 3px" type="text" @click="emits('addWindow')">
          添加
        </el-button>
      </div>
    </template>
    <el-table :data="materials" highlight-current-row border class="data-table__content">
      <el-table-column label="名称" prop="name" />
      <el-table-column label="编码" prop="code" width="150" />
      <el-table-column label="市场价格" prop="price" width="150">
        <template #default="scope">
          {{ `￥${scope.row.price}` }}
        </template>
      </el-table-column>
      <el-table-column label="成本价" prop="price" width="150">
        <template #default="scope">
          {{ `￥${scope.row.costPrice}` }}
        </template>
      </el-table-column>
      <el-table-column label="单位" prop="unit" width="150" />
      <el-table-column label="规格" prop="spec" />
      <el-table-column label="数量" prop="num" width="180">
        <template #default="scope">
          <el-input-number v-model="scope.row.num" :min="1" :max="scope.row.quantity - scope.row.lockQuantity"
            :precision="0" placeholder="请输入数量" />
        </template>
      </el-table-column>
      <el-table-column fixed="right" label="操作">
        <template #default="scope">
          <el-button :disabled="scope.row.systemd" type="danger" size="small" link icon="delete"
            @click="removeMaterial(scope)">
            删除
          </el-button>
        </template>
      </el-table-column>
    </el-table>
  </el-card>
</template>

<script lang="ts" setup>
import { MaterialChooseVO } from "@/api/business/material/material.api";

const props = defineProps<{
  title: string;
}>();
const emits = defineEmits(["addWindow"]);
const materials = ref<MaterialChooseVO[]>([]);

/**
 * 添加
 * @param nList
 */
function addMaterial(nList: MaterialChooseVO[]) {
  const existingIds = new Set(materials.value.map((item) => item.id));
  const uniqueItems = nList.filter((item) => !existingIds.has(item.id));
  if (uniqueItems.length > 0) {
    materials.value = [...materials.value, ...uniqueItems];
  }
}

/**
 * 删除
 * @param item
 */
function removeMaterial(scope: any) {
  materials.value.splice(scope.$index, 1);
}

/**
 * 清空表格数据
 */
function clearData() {
  materials.value = [];
}

function getData() {
  return materials.value;
}

defineExpose({
  addMaterial,
  getData,
  clearData,
});
</script>

<style lang="scss" scoped></style>
